$f-danger-color: #721c24;
$f-danger-bgcolor: #f8d7da;
$f-danger-border-color: #f5c6cb;
$f-info-bgcolor: #fff;

.f-tooltip {
    position: absolute;
    display: none;
    padding: .25em .5em;
    max-width: 12.5em;
    line-height: 1.2rem;
    border-radius: 5px;

    &-right,
    &-left {
        padding: 0 .6em;
    }

    &-top,
    &-bottom {
        padding: .6em 0;
    }

    &-top-left,
    &-top-right,
    &-bottom-left {
        padding: 0;
    }

    &-default {
        background-color: rgb(76, 76, 76);
        color: #ffffff;
        border: 1px solid rgb(76, 76, 76);
    }

    &-text {
        padding: .5em .3em;
        white-space: pre-line;
        border-radius: 3px;
        box-shadow: 1px 1px 2px #9d9d9d;
    }

    &-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 1em;
    }

    &-right &-arrow {
        top: 50%;
        left: 0;
        margin-top: -.5em;
        border-width: 1em;
        border-left-width: 0;
        border-right-color: rgb(76, 76, 76);
    }

    &-left &-arrow {
        top: 50%;
        right: 0;
        margin-top: -.5em;
        border-width: 1em;
        border-right-width: 0;
        border-left-color: rgb(76, 76, 76);
    }

    &-top,
    &-bottom {
        .f-tooltip-arrow {
            left: 50%;
            margin-left: -.5em;
            border-width: 1em;
            border-top-color: rgb(76, 76, 76);
        }
    }

    &-top &-arrow {
        bottom: 0;
        border-bottom-width: 0;
    }


    &-top-left,
    &-bottom-left {
        .f-tooltip-arrow {
            left: 10px;
            margin-left: -0.5em;
            border-bottom-width: 0;
        }
    }

    &-top-right,
    &-top-left {
        .f-tooltip-arrow {
            bottom: 0;
            margin-bottom: -0.5em;
        }
    }

    /** top-right */
    &-top-right,
    &-bottom-right {
        .f-tooltip-arrow {
            right: 10px;
            margin-right: -0.5em;
            border-bottom-width: 0;
        }
    }


    &-bottom &-arrow {
        top: 0;
        border-top-width: 0;
    }

    &-bottom-left &-arrow {
        top: 0;
    }


    &-info.f-tooltip-top-left,
    &-info.f-tooltip-top-right {
        .f-tooltip-arrow {
            border-top-color: $f-info-bgcolor;
        }
    }

    &-info.f-tooltip-bottom {
        .f-tooltip-arrow {
            border-bottom-color: $f-info-bgcolor;
        }
    }

    &-info.f-tooltip-right {
        .f-tooltip-arrow {
            border-right-color: $f-info-bgcolor;
        }
    }

    &-info.f-tooltip-left {
        .f-tooltip-arrow {
            border-left-color: $f-info-bgcolor;
        }
    }

    &-info &-text {
        background-color: $f-info-bgcolor;
        box-shadow: 1px 1px 6px 3px #b5b5b5;
    }

    &-danger &-text {
        color: $f-danger-color;
        background-color: $f-danger-bgcolor;
        border-color: $f-danger-border-color;
    }

    &-danger.f-tooltip-top-left,
    &-danger.f-tooltip-top {
        .f-tooltip-arrow {
            border-top-color: $f-danger-border-color;
        }
    }
}